<template>
  <input class="input_cContainer"
    type="text"
      name="text"
      :placeholder="placeholder"
      v-model="inputValue">
      </input>
</template>

<script setup lang="ts">
import { i18nt } from '@/i18n';
const inputValue = ref("");

defineExpose({
  inputValue,
});

defineProps({
  placeholder: {
    type: String,
    required: false,
    default: i18nt.value.demand.str6,
  },

});



watch(inputValue, (newVal) => {
  if (typeof newVal === "string") {
    inputValue.value = newVal.trim().replace(/^"|"$/g, "");
  }
});


</script>

<style scoped lang="scss">
.input_cContainer {
    @include relative_hw(50px, 646px);
    border-radius: 10px 10px 10px 10px;
    border: 1px solid #DDDFE5;
    background: #FFFFFF;
    transition: all 0.3s ease;
    &::placeholder {
        padding-left: 21px;
        width: 96px;
        height: 22px;
        font-family: "PingFang SC", "PingFang SC";
        font-weight: 400;
        font-size: 16px;
        color: #A6AAB2;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }

    cursor: pointer;
    &:focus {
      border-color: #FFFFFF; /* 选中时 border 颜色 */
      border-radius: 15px 15px 15px 15px; /* 选中时 border-radius */
    }
}
</style>
